<template>
  <div class="feedback app-container">
    <div class="my-tabs">
      <div class="tabs-item" :class="{ active: activeTabs === 1 }" @click="changeTabs(1)">
        <p>意见反馈配置</p>
      </div>
      <div class="tabs-item" :class="{ active: activeTabs === 2 }" @click="changeTabs(2)">
        <p>
          意见反馈收集
          <el-tag :type="'danger'" round v-if="listCount.uncompletedTotal!=0"> {{ listCount.uncompletedTotal }} </el-tag>
        </p>
      </div>
    </div>
    <div class="content">
      <FeedConfig v-if="activeTabs === 1"></FeedConfig>
      <FeedCollect :listCount="listCount" @getCount="getCount" v-if="activeTabs === 2"></FeedCollect>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import FeedConfig from "./components/FeedConfig.vue";
import FeedCollect from "./components/FeedCollect.vue";
import {getFeedbackCount  } from "@/api/mall/feedback";

const activeTabs = ref(1);

const changeTabs = val => {
  activeTabs.value = val;
};
/**
* 列表数量
*/
const listCount = ref({
  uncompletedTotal: 0,
  completedTotal: 0
  
});
const getCount=async () => {
  const count = await getFeedbackCount();
  listCount.value = count.data;
}
onMounted(()=>{
  getCount()
})
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

.feedback {
  .my-tabs {
    display: flex;
    position: absolute;

    .tabs-item {
      width: 282px;
      height: 64px;
      padding: 10px 20px;
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      background-color: #f5f7fa;
      cursor: pointer;
      font-size: 12px;
      color: #86909c;
      display: flex;
      align-items: center;

      p {
        width: 100%;
        font-size: 16px;
        color: #131414;
        line-height: 24px;
        display: flex;
        justify-content: space-between;

        .el-tag {
          height: 20px;
        }
      }

      &:first-of-type {
        margin-right: 20px;
      }

      &.active {
        background-color: white;
        box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
      }
    }
  }

  .content {
    background-color: white;
    padding: 20px;
    box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
    margin-top: 64px;
  }
}
</style>
